<!-- 统计 -->
<template>
  <div class="box">
    <div class="box_title">总注册志愿者数</div>
    <div class="box_total">
      <countTo class="box_total_count" :endVal="total" :duration="2000" />
      <span class="box_total_unit">人</span>
    </div>
    <div class="box_list">
      <div class="box_list_item l-f l-row-sb"
      v-for="(item,index) in list"
      :key="index">
          <div class="l-f">
            <div class="box_list_item_dot" :style="{
              backgroundColor: item.color
            }"></div>
            <div class="box_list_item_name">{{item.name}}</div>
          </div>
          <div class="l-f">
            <countTo 
            class="box_list_item_count"
            :style="{
              color: item.color ? item.color : '#000000'
            }"
            :endVal="item.number" 
            :duration="1500" />
            <span class="box_list_item_unit">{{item.unit}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  components: {
    countTo,
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 30px;
  box-sizing: border-box;
  &_title {
    font-size: 30px;
    color: #000000;
    font-weight: 700;
  }
  &_total {
    color: #e4493e;
    font-weight: 700;
    vertical-align: baseline;
    margin-top: 10px;
    text-wrap: nowrap;
    &_count {
      font-size: 60px;
    }
    &_unit {
      font-size: 20px;
    }
  }
  &_list {
    margin-top: 20px;
    &_item {
      margin-bottom: 15px;
      &_dot {
        width: 10px;
        height: 10px;
        background-color: #000000;
        border-radius: 50%;
      }
      &_name {
        font-size: 16px;
        color: #000000;
        margin-left: 6px;
      }
      &_count {
        font-size: 25px;
      }
      &_unit {
        font-size: 14px;
        color: #000000;
        margin-left: 6px;
      }
    }
  }
}
</style>